<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keys" content="">
    <meta name="author" content="">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}"
          href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}" href="css/font-awesome.min.css">
    <link rel="stylesheet" th:href="@{/css/login.css}" href="css/login.css">
    <style>

    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <div><a class="navbar-brand" href="index.html"
                    style="font-size:32px;">尚筹网-创意产品众筹平台</a></div>
        </div>
    </div>
</nav>

<div class="container" style="margin-top: 100px">

    <form id="loginForm" th:action="@{/login/login}" method="post" class="form-signin" role="form">
        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-user"></i> 用户登录</h2>
        <div class="form-group has-success has-feedback">
            <input type="text" class="form-control" id="account" name="account" placeholder="请输入登录账号" autofocus>
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" class="form-control" id="password" name="password" placeholder="请输入登录密码"
                   style="margin-top:10px;">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <select class="form-control">
                <option value="member">会员</option>
                <option value="user">管理</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> 记住我
            </label>
            <br>
            <label>
                忘记密码
            </label>
            <label style="float:right">
                <a href="reg.html">我要注册</a>
            </label>
        </div>
        <p style="color: red;" th:text="${errorMsg}" th:if="${not #strings.isEmpty(errorMsg)}"></p>
        <a class="btn btn-lg btn-success btn-block" onclick="dologin()"> 登录</a>
    </form>
</div>
<script th:src="@{/webjars/jquery/3.3.1/jquery.js}" src="jquery/jquery.js"></script>
<script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}" src="bootstrap/js/bootstrap.js"></script>
<script th:src="@{/webjars/github-com-sentsin-layer/3.0.3/src/layer.js}"></script>
<script>


    function dologin() {
        var account = $.trim($("#account").val());
        var password = $.trim($("#password").val());
        if (account == "") {
            layer.msg("请输入用户名", {icon: 0, time: 2000, anim: 6})
            //alert("请输入用户名");
            return;
        }
        if (password == "") {
            layer.msg("请输入密码", {icon: 0, time: 2000, anim: 6})
            return;
        }
        //采用Ajax 来提交，防止页面刷新
        var url = "http://localhost:8080/login/login";
        var data = {
            account: account,
            password: password
        };

        var index;
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            beforeSend: function () {
                index = layer.load();
            },
            success: function (result) {
                layer.close(index);
                if (result.success) {
                    layer.msg("登录成功", {time: 1000, icon: 1, anim: 6})
                    window.location.href = "/main";
                } else {
                    layer.msg("用户名密码不正确", {time: 2000, icon: 5, anim: 6})
                }
            }
        });

        //$("#loginForm").submit();
    }
</script>
</body>
</html>